<template>
<div class="case_box">

  <!--案例banner-->
  <section class="project_banner" v-for="(item, index) in bannerData" v-if="index === 0">
    <img v-lazy="item.bannerImg" :key="item.bannerImg"/>
    <div class="project_banner_con" v-if="dictionaryData.length > 0">
      <h1 class="fwei-nor f36 text-c color-white slideInUp animated">
        <span class="content_none" >{{dictionaryData[0].statusValue}} </span>
        <span class="counter" data-counter-time="1000" data-counter-delay="50" >{{dictionaryData[1].statusValue}}</span>
        {{dictionaryData[2].statusValue}}
      </h1>
      <h3 class="fwei-nor f20 text-c color-white mt-35 slideInUp animated">{{dictionaryData[3].statusValue}}</h3>
    </div>
  </section>
  <!--案例列表内容-->
  <section class="project_main clearfix ">
    <ul id="filters" class=" project_con_nav">
      <li v-for="(tab, index) in typeData" @click="handleChange(tab.value)">
				<span class="filter"
          :class="curId === tab.value ? 'active' : ''">
					<img class="icon-tab" v-if="curId === tab.value" v-lazy="tabIcona[index]" :key="tabIcon[index]"/>
					<img class="icon-tab" v-else v-lazy="tabIcon[index]" :key="tabIcon[index]"/>
					<span class="ml-20 span" >{{tab.label}}</span>
				</span>
      </li>
    </ul>
      <transition-group name="flip-list" tag="div" class="project_con">
        <div
          class="portfolio"
          v-for="(items,index) in caseData"
          :key="items.caseId"
          v-if="items.caseType === curId || curId === 'all'"
          >
          <router-link
            target="headFrame"
            :to="'case-detail?id=' + items.caseId ">
            <div class="project_con_list pd-15">
              <img v-lazy="baseURL + items.caseMinImg[0]" :key="items.caseMinImg[0]" class="border-ra5 border" />
              <span class="inline-block f16" v-text="items.caseName"></span>
              <p class="inline-block mt-10 f14" v-text="items.caseIntroduce"></p>
            </div>
          </router-link>
        </div>
      </transition-group>
  </section>
  <Footer/>
</div>
</template>

<script>
import indexJs from "./indexJs";
export default indexJs
</script>

<style scoped>
  .flip-list-move {
    transition: transform 1s;
  }
</style>
